import React, { Component } from 'react'
import { Input,Select,Button,Table,Divider,Pagination } from 'antd';
import { connect } from 'dva';
import styles from './form.less';
const { Search } = Input;
const { Option } = Select;
@connect(({loading,formOne})=>{
  return{
      ...formOne,//text是text命名空间的数据，通常是一个对象，...展开对象，返回的对象，这个对象会被 dva 并入到 props 中
      // loading:loading.models.test,
  }
})
 class FormOne extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = { 
            selectedRowKeys: [],
            selectTitle:[],
            inputTitle:'',  
            current: 1,  
            };
    }
    cgTitle=(type)=>{   
        if(type!=='inputT'){
          this.setState({selectTitle:type})
        } else{
        return (event)=>{
          this.setState({//融合state
            ...this.state,
            inputTitle:event.target.value
          })
        }}
      }
    changeTableTitle=()=>{
        const {inputTitle,selectTitle}=this.state
        let title=inputTitle+selectTitle
        let totalTitle=title.split(',').join('')
        this.props.dispatch({
          type: 'formOne/dchangetitle',
          totalTitle,
        }
        )
      }
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
      };
   
    onChange1 = page => {
        this.setState({
          current:page,
        });
        this.props.dispatch({
            type: 'formOne/jump',
            currentPageNum:page,
          }) 
      };
    clearAll = ()=>{
        this.setState({
            selectTitle:[],
            inputTitle:'',
            current:1,
        })
        this.props.dispatch({
            type: 'formOne/jump',
            currentPageNum:1,
          },) 
        this.props.dispatch({
            type: 'formOne/dchangetitle',
            totalTitle:'',})
    }
    columns = [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
        },
        {
          title: 'Action',
          dataIndex: 'action',
          render: () => (
              <span>
              <a>edit</a>
              <Divider type="vertical" />
              <a>Delete</a>
              </span>
          ),
        },
      ];
    render() {
        const{selectTitle,inputTitle,current}=this.state
        const children = [];
        for (let i = 10; i < 36; i++) {
          children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
        }
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
                name: record.name,
            }),
            };
        return (
            <div>
                <div className={styles.searchtop}>
                    <Search
                        placeholder="input search text"
                        onSearch={value => console.log(value)}
                        style={{ width: 200,marginRight:20, }}
                        />
                    <Select 
                            value={selectTitle}
                            mode="multiple"
                            style={{ marginRight:20,width: 200 }} 
                            onChange={this.cgTitle}
                            showSearch
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }>
                            {children}
                    </Select>
                    <Button type="primary" style={{marginRight:20, }}>搜索</Button> 
                    <Input value={inputTitle} name="b" onChange={this.cgTitle('inputT')} placeholder="Basic usage" style={{marginRight:20,width:200}}/> 
                    <Button  type="primary"  onClick={this.changeTableTitle}  style={{marginRight:20,}}>改变表格标题</Button>
                    <Button type="primary"  onClick={this.clearAll}>恢复原始值</Button>  
                </div>
                <div className={styles.table}>
                    <h2 style={{padding:'15px', textAlign:"center",backgroundColor:"#ccc",color:"white"}}>{this.props.title}</h2>
                    <Table rowSelection={rowSelection} columns={this.columns} dataSource={this.props.tableList} pagination={false}/>
                    <Pagination current={current} onChange={this.onChange1} total={15} className={styles.pagination} pageSize={5}/>
                </div>
            </div>
        )
    }
}
export default FormOne
